/**index.less**/
@import '../../app.less';

page {
    background: #ffffff;
    .container {
        padding-bottom: 30rpx;
        swiper {
            width : 100%;
            height: 460rpx;
            .swiper-pic {
                width : 100%;
                height: 460rpx;
            }
        }
        .goods-area {
            width : 722rpx;
            margin: 0 14rpx;
            .goods-title{
                color:@main-color;
                font-size:32rpx;
                line-height:44rpx;
                margin-bottom:20rpx;
            }
            .goods-item {
                width : 100%;
                background : #fafafa;
                padding : 0 7rpx 20rpx;
                margin : 10rpx 0;
                border-radius: 12rpx;
                .comment {
                    .user-info {
                        padding : 16rpx 5rpx;
                        color : @main-color;
                        font-size: 32rpx;
                        font-weight: bold;
                        line-height: 44rpx;
                        .user-avatar {
                            width : 72rpx;
                            height : 72rpx;
                            border-radius: 50%;
                            margin-right : 16rpx;
                        }
                        .user-name {
                            .oneline();
                            color : @main-color;
                            font-size  : 32rpx;
                            font-weight: bold;
                            line-height: 44rpx;
                        }
                    }
                    .comment-text {
                        .twoline();
                        color : @main-color;
                        font-size : 24rpx;
                        line-height: 34rpx;
                        padding: 0 5rpx;
                    }
                    .comment-pic {
                        padding: 0 5rpx;
                        image {
                            width : 226rpx;
                            height: 226rpx;
                            margin: 20rpx 5rpx;
                        }
                    }
                    .comment-tip {
                        color: @minor-color;
                        font-size: 12rpx;
                        line-height: 16rpx;
                        padding-bottom: 20rpx;
                        margin : 0 5rpx;
                        border-bottom : solid 2rpx #e5e5e5;
                    }
                
                }
                .goods {
                    width : 100%;
                    padding : 12rpx 15rpx;
                    margin-top: 20rpx;
                    background: #ffffff;
                    .goods-pic {
                        width : 96rpx;
                        height  : 96rpx;
                        margin-right: 16rpx;
                    }
                    .goods-info {
                        width : 264rpx;
                        margin-right: 40rpx;
                    
                        .goods-name {
                            color : @main-color;
                            font-size: 24rpx;
                            line-height: 34rpx;
                        }
                        .goods-price {
                            color : #ff4e4e;
                            font-size: 24rpx;
                            text {
                                font-size  : 32rpx;
                                line-height: 44rpx;
                            }
                        }
                    }
                }
                .buy-btn,.give-btn {
                    color: #24252D;
                    font-size : 28rpx;
                    width : 110rpx;
                    height : 64rpx;
                    line-height : 64rpx;
                    background : #ffffff;
                    border: solid 2rpx #24252D;
                    text-align : center;
                    border-radius: 4rpx;
                }
                .buy-btn {
                    border-radius:32rpx 0rpx 0rpx 32rpx;
                }
                .give-btn {
                    color: #FFCD81;
                    background: #24252D;
                    border: none;
                    border-radius:0rpx 32rpx 32rpx 0rpx;
                }
            }
        }
        .activity-area {
            width  : 100%;
            margin:10rpx 9rpx;
            .activity-item {
                width : 356rpx;
                height : 180rpx;
                border-radius: 8rpx;
                margin : 0 5rpx 10rpx;
                image{
                    width : 356rpx;
                    height : 180rpx;
                    border-radius: 8rpx;
                }
            }
            .partner-group{
                width:722rpx;
                height:148rpx;
                border-radius: 8rpx;
                image{
                    width:722rpx;
                    height:148rpx;
                    border-radius: 8rpx;
                }
            }
        }
        .water-card-area {
            width  : 100%;
            padding: 20rpx 14rpx;
            .water-card-title {
                color : @main-color;
                font-size  : 32rpx;
                line-height: 44rpx;
                font-weight: bold;
                margin : 0 0 14rpx 6rpx;
            }
            .water-card-item {
                width : 100%;
                height : 200rpx;
                border-radius: 8rpx;
                image{
                    width : 100%;
                    height : 200rpx;
                    border-radius: 8rpx;
                }
                
            }
        }
        .regard-area{
            width:100%;
            padding:20rpx 7rpx;
            .regard-title{
                color : @main-color;
                font-size  : 32rpx;
                line-height: 44rpx;
                font-weight: bold;
                margin : 0 0 10rpx 13rpx;
            }
            .regard-vice-title{
                color:@minor-color;
                font-size:24rpx;
                line-height:34rpx;
                padding-left:13rpx;
                .arrow-right{
                    .arrow();
                    border-top  : 2rpx solid @minor-color;
                    border-right: 2rpx solid @minor-color;
                    margin : 0 25rpx 0 5rpx;
                }
            }
            .regard-list{
                width:100%;
                flex-wrap: wrap;
                .regard-item{
                    width:354rpx;
                    height:240rpx;
                    background:#ffffff;
                    border-radius:8rpx;
                    margin:30rpx 7rpx;
                    box-shadow:0 4rpx 8rpx 0 rgba(204,204,204,0.5);
                    image{
                        width:354rpx;
                        height:166rpx;
                        border-radius:8rpx 8rpx 0 0;
                    }
                    .regard-name{
                        color:@main-color;
                        font-size:24rpx;
                        height:74rpx;
                        line-height:74rpx;
                        text-align:center;
                    }
                }
            }
        }
        .follow-area {
            width  : 100%;
            padding: 0 14rpx;
            .follow-title{
                color:@main-color;
                font-size:32rpx;
                line-height:44rpx;
                margin-bottom:20rpx;
            }
            .follow-item {
                width : 100%;
                padding : 16rpx 12rpx;
                background: #fafafa;
                margin : 10rpx 0;
                .follow-user {
                    .user-avatar {
                        width : 72rpx;
                        height : 72rpx;
                        border-radius: 50%;
                        margin-right : 16rpx;
                    }
                
                    .user-name {
                        color : @main-color;
                        font-size  : 32rpx;
                        line-height: 44rpx;
                        font-weight: bold;
                    }
                
                    .user-trends {
                        color : @minor-color;
                        font-size : 24rpx;
                        line-height: 34rpx;
                    }
                }
                .follow-title {
                    .twoline();
                    color : @main-color;
                    font-size  : 32rpx;
                    font-weight: bold;
                    line-height: 44rpx;
                    margin : 20rpx 0 10rpx;
                }
                .follow-detail {
                    .threeline();
                    color : @main-color;
                    font-size : 24rpx;
                    line-height: 34rpx;
                }
                .follow-pic {
                    width : 100%;
                    height: 280rpx;
                    margin: 10rpx 0 20rpx;
                }
                .follow-tip{
                    color:@minor-color;
                    font-size:12rpx;
                    line-height:16rpx;
                    margin-bottom: 20rpx;
                }
                .focus-box {
                    .focus-user{
                        image {
                            width : 72rpx;
                            height: 72rpx;
                            border : solid 2rpx #ffffff;
                            border-radius: 50%;
                            &:first-of-type {
                                margin-left: 0;
                            }
                        }
                        text {
                            align-self: flex-end;
                        }
                        .one-user {
                            margin-left: 0; 
                        }
                        .two-user {
                            margin-left: 20rpx;
                        }
                        .three-user {
                            margin-left: 8rpx;
                        }
                        .four-user {
                            margin-left: -18rpx;
                        }
                        .five-user {
                            margin-left: -32rpx;
                        }
                        .check-num {
                            color : @minor-color;
                            font-size : 24rpx;
                            line-height: 34rpx;
                            margin-left: 20rpx;
                        }
                    }
                    .focus-btn {
                        color: #ffcd81;
                        font-size: 24rpx;
                        width: 110rpx;
                        height: 56rpx;
                        line-height : 56rpx;
                        background : linear-gradient(to right, #666666, #2b2b2b);
                        box-shadow : 0 4rpx 6rpx 0 rgba(89, 89, 89, 1);
                        text-align : center;
                        border-radius: 4rpx;
                        margin : 0 10rpx;
                    }
                }
            }
        }
    }
}


